<template>
  <div class="bg">
    <!-- <div style='height: 1px; width: 100%;background-color:#EAF5FF;'></div> -->
    <van-sticky>
      <form action="/">
        <van-search @input="onSearch" v-model="query.groupName" @search="onSearch" clearable @clear="onClear" placeholder="请输入客群/群主名称" />
      </form>
      <div class="menu">
        <span @click="openDialg('tag')">客群标签<img class="select" width="16" height="16" src="../../assets/select@2x.png" /></span>
        <span @click="openDialg('date')">创建时间<img class="select" width="16" height="16" src="../../assets/select@2x.png" /></span>
      </div>
      <van-overlay :lock-scroll="false" :show="show" z-index='2'>
        <form action="/">
          <van-search @input="onSearch" v-model="query.groupName" @search="onSearch" clearable @clear="onClear" shape="round" placeholder="请输入客户/员工名称" />
        </form>
        <div class="menu">
          <span @click="openDialg('tag')" :style="showTag ? titleActive: ''">客群标签<img v-if="showTag" class="select" width="16" height="16" src="../../assets/selected@2x.png" /><img v-else class="select" width="16" height="16" src="../../assets/select@2x.png" /></span>
          <span @click="openDialg('date')" :style="showDate ? titleActive: ''">创建时间<img v-if="showDate" class="select" width="16" height="16" src="../../assets/selected@2x.png" /><img v-else class="select" width="16" height="16" src="../../assets/select@2x.png" /></span>
        </div>
        <template v-if="showTag">
          <div style="background:#fff;">
            <select-tag type='2' :selected="selectTagList" @submit="getSelectList"></select-tag>
          </div>
        </template>
        <template v-if="showDate">
          <div style="background:#fff;">
            <select-date :start="query.beginTime" :end="query.endTime" @success="getDate"></select-date>
          </div>
        </template>
      </van-overlay>
    </van-sticky>
    <div class="sub-search">
      <span>客群总数： {{total}}</span>
      <my-switch v-model="checked" text="个人|全部" @change="changeFn"></my-switch>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="暂无更多数据" @load="onLoad">
      <div class="list">
        <div class="unit" v-for="(data, index) in dataList" :key="index" @click="gotoDetail(data.chatId)">
          <img class="unit_img" src="../../assets/avator.png"></img>
          <div class="unit_content">
            <div style="display: flex;align-items:center;">
              <span class="name" v-html="data.groupName"></span>
            </div>
            <div class="user">
              <span>群主：</span>
              <span v-html="data.groupLeaderName"></span>
            </div>
          </div>
          <div class="unit_state">
            <div>
              <span class="state"><img style="height: 16px;width: 16px;margin-right: 3px;" src="../../assets/people@2x.png" />{{data.memberNum}}</span>
            </div>
            <span class="date">{{data.addTime}}</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
  import SelectTag from '@/components/SelectTag'
  import SelectDate from '@/components/SelectDate'
  import MySwitch from '@/components/Switch'
  import { getGroupList } from '@/api/group'

  export default {
    name: 'customer_group_list',
    components: { SelectTag, MySwitch, SelectDate },
    data () {
      return {
        loading: false,
        finished: false,
        query: {
          groupName: '',
          tagIds: '',
          beginTime: '',
          endTime: '',
          pageNum: 1,
          pageSize: 10,
          // delFlag: 0,
          dataScope: false
        },
        checked: true,
        show: false,
        showTag: false,
        showDate: false,
        activeStyle: {
          background: '#ECF5FF',
          color: '#0079DE'
        },
        titleActive: {
          color: '#0079de'
        },
        selectTagList: [],
        dataList: [],
        total: 0,
      }
    },
    computed: {},
    watch: {},
    created () { this.getList() },
    mounted () { },
    methods: {
      gotoDetail (id) {
        this.$router.push({
          name: 'portraitGroup',
          query: {
            id: id,
          },
        })
      },
      getDate (start, end) {
        this.query.beginTime = start
        this.query.endTime = end
        this.showDate = false
        this.show = false
        this.getList(1)
      },
      onLoad () {
        if (this.total !== this.dataList.length) {
          this.query.pageNum++
          this.getList()
        }
      },
      getSelectList (data) {
        this.selectTagList = data
        this.query.tagIds = data.map(dd => { return dd.tagId }).join(',')
        this.showTag = false
        this.show = false
        this.getList(1)
      },
      openDialg (type) {
        if (type === 'tag') {
          if (this.showTag) {
            this.show = false
          } else {
            this.show = true
          }
          this.showTag = !this.showTag
          this.showDate = false
        }
        if (type === 'date') {
          if (this.showDate) {
            this.show = false
          } else {
            this.show = true
          }
          this.showDate = !this.showDate
          this.showTag = false
        }
      },
      onSearch () {
        this.getList(1)
      },
      onClear () {
        this.query.groupName = ''
        this.getList(1)
      },
      changeFn (data) {
        this.query.dataScope = !data
        this.getList(1)
      },
      getList (page) {
        page && (this.query.pageNum = page)
        this.loading = true
        this.finished = false
        // this.dataList = [{groupName: '张三测试', groupLeaderName:"跟进员工", memberNum: 23, addTime: '2022-06-14'}]
        getGroupList(this.query).then(res => {
          if (res.code === 200) {
            if (this.query.pageNum > 1) {
              this.dataList = [...this.dataList, ...res.rows]
            } else {
              this.dataList = res.rows
            }
            this.total = Number(res.total)
            if (this.total === this.dataList.length) {
              this.finished = true
            }
            if (this.query.groupName) {
              let replaceReg = new RegExp(this.query.groupName, 'ig')
              let replaceString = `<span style="color: #0079DE;">${this.query.groupName}</span>`
              this.dataList.forEach(dd => {
                dd.groupName = dd.groupName.replace(replaceReg, replaceString)
                dd.groupLeaderName = dd.groupLeaderName.replace(replaceReg, replaceString)
              })
            }
          }
          this.loading = false
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  .active {
    color: #0079de;
  }
  .bg {
    background: linear-gradient(180deg, #eaf5ff 0%, rgba(253, 253, 253, 0) 100%);
    border-radius: 0px 0px 0px 0px;
  }
  .menu {
    padding: 11px 16px 14px 16px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
  }
  .sub-search {
    font-size: 13px;
    color: #666;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .type_list {
    display: flex;
    padding: 25px 15px;
    background: #fff;
    flex-wrap: wrap;
    .item {
      margin-left: 13px;
      margin-bottom: 11px;
      background: #fafafa;
      border-radius: 8px;
      font-size: 13px;
      color: #222222;
      width: 72px;
      height: 34px;
      line-height: 34px;
      text-align: center;
    }
  }
  .submit {
    padding: 10px 20px;
    background: #fff;
    .submit_button {
      padding: 10px 20px;
      width: 100%;
      background: #0079de;
      border-radius: 8px;
      color: #ffffff;
      font-size: 16px;
      padding: 10px 0;
      text-align: center;
    }
  }
  .list {
    padding: 0 12px;
    .unit {
      margin-bottom: 8px;
      padding: 14px;
      background: #ffffff;
      box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0);
      border-radius: 8px;
      display: flex;
      .unit_img {
        height: 46px;
        width: 46px;
        border-radius: 2px;
      }
      .unit_content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding-left: 10px;
        .name {
          margin-right: 4px;
          font-size: 14px;
          color: #222222;
          font-weight: 600;
        }
        .user {
          font-size: 13px;
          color: #9f9f9f;
          font-weight: 500;
        }
      }
      .unit_state {
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .date {
          font-size: 13px;
          color: #9f9f9f;
        }
        .state {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          font-size: 13px;
          color: #999999;
        }
      }
    }
  }
  .select {
    margin-left: 2px;
    height: 12px;
    width: 12px;
  }
</style>
<style lang="less">
  .bg .van-field__control {
    font-size: 12px;
  }
  .bg .van-search {
    padding: 11px 16px 0 16px;
  }
  .bg .van-search__content {
    border-radius: 8px 8px 8px 8px;
  }
  .bg input::-webkit-input-placeholder {
    font-size: 12px;
  }
  .bg input::-moz-input-placeholder {
    font-size: 12px;
  }
  .bg input::-ms-input-placeholder {
    font-size: 12px;
  }
  .sub-search {
    .van-switch {
      width: 3em;
      color: #fff;
    }
    .van-switch--on .van-switch__node {
      -webkit-transform: translateX(2em);
      transform: translateX(2em);
    }
    .van-switch--on .van-switch::before {
    }
    // .van-switch--on::after {
    //   content: '企业';
    //   font-size: 12px;
    //   position: absolute;
    //   top: 50%;
    //   transform: translateY(-50%);
    //   left: 25px;
    //   color: '#333';
    // }
  }
</style>
